<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/layui.css">
    <script src="../layui.js"></script>
    <script src="../js/jquery-3.5.1.js"></script>
    <title>缴费账单</title>
</head>
<body style="height: 100%; width:100% ;">
    <div style="padding: 15px;">
        <!-- 面包屑 -->

    <div style=" padding: 15px;  background-color: #ffffff; border: solid #eeeeee 1px; box-shadow: inset 0 0 10px rgba(255, 255, 227, 0.925);">
        <fieldset class="layui-elem-field layui-field-title" style="margin: 0; border-top: none; padding: 0;height: 25px;line-height: 25px;">
          <span class="layui-breadcrumb" >
            <a href="/">费用管理</a>
            <a href="/">门诊退费</a>
            <a><cite>药品退费</cite></a>
          </span>
        </fieldset>
      </div>
  
      <!-- 面包屑 -->

        <blockquote class="layui-elem-quote" style="margin-top: 10px;">
            患者账单
        </blockquote>


        <!-- 余额显示 -->
        <div class="balance">
            <hr>
            <div style="margin: 10px 60px; background-color: rgb(242, 249, 255);">
                <div class="layui-row" >
                    <div class="layui-col-xs4 layui-col-md-offset3">
                        <span>姓名:</span>
                        <span id="yh_name"></span>
                    </div>
                    <div class="layui-col-xs4">
                        <span>性别:</span>
                        <span id="br_sex"></span>
                    </div>
                </div>
                <div class="layui-row">
                    <div class="layui-col-xs4 layui-col-md-offset3">
                        <span>卡号:</span>
                        <span id="br_card"></span>
                    </div>
                    <div class="layui-col-xs4">
                        <span>余额:</span>
                        <span id="br_balance">￥</span>
                    </div>
                </div>


            </div>
            <hr>
        </div>
        <!-- 余额显示 -->




        <!-- 表头，在此基础渲染  -->
        <table class="layui-hide" id="test" lay-filter="test"></table>
        <div class="layui-form-item " style="text-align: center;">
            <span  class="" style="font-size: 16px; line-height: 38px; height: 38px;">总计: &nbsp;￥ </span>
            <span id="sf_cost"></span>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <button class="layui-btn layui-btn-normal" id="refund"  style="display: inline;height: 38px;">退回医疗卡</button>
        </div>

        <hr>


    </div>


    <style>
        /* input:-webkit-autofill {-webkit-box-shadow: 0 0 0px 1000px rgb(242, 249, 255) inset;} */
        .balance{
            display:block;
            width: 913px;
            padding-left: 22px;
            padding-right: 20px;
        }
        .balance span{
            font-size: 16px;
            line-height: 30px;
            height: 30px;
            padding:10px;
        }
    </style>
    <!-- // 表格处理 -->






    <script>
        var sf_id = getUrlParam('sf_id');
        $(function (){
            $.ajax({
                url: '/charge/getBalance',
                data: {'sf_id': sf_id},
                method: 'POST',
                dataType: 'json',
                success:function (data){
                    //var data = JSON.parse(success);
                    $("span#yh_name").text(data.yh_name);
                    $("span#br_sex").text(data.br_sex);
                    $("span#br_card").text(data.br_card);
                    $("span#br_balance").text(data.br_balance);
                    $("span#sf_cost").text(data.sf_cost);
                }
            })
        });
        function getUrlParam(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]); return null;
        }
        var a;
        layui.use('table', function(){
            var table = layui.table;

            table.render({
                elem: '#test',
                url:'/charge/getBill?sf_id='+sf_id   //数据来源接口
                ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                    title: '提示'
                    ,layEvent: 'LAYTABLE_TIPS'
                    ,icon: 'layui-icon-tips'
                }]
                ,title: '用户数据表'
                ,cols: [
                    [  //表头
                        {type: 'checkbox', "LAY_CHECKED":true,fixed: 'left'}
                        ,{field: 'yp_id', title: '药品代码', width:120, sort: true, fixed: 'left'}
                        ,{field: 'yp_name', title: '药品名称', width:130}
                        ,{field: 'yp_standard', title: '药品规格', width:100}
                        ,{field: 'yp_producer', title: '生产厂家', width: 250 }
                        ,{field: 'yp_uprice', title: '药品单价', width: 100}
                        ,{field: 'yz_amount', title: '药品数量', width:100}
                    ]
                ]
                ,page: true
                ,parseData: function (res) {
                    return {
                        'code' : 0,
                        'msg' : '',
                        'count': res.length,
                        'data':res
                    }
                }
            });


        });
        $("#refund").on('click',function(){
            $.ajax({
                url: '/charge/updateRefund',
                data: {'sf_id': sf_id},
                method: 'GET',
                success:function (){

                }
            })
            alert("成功");
            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
            parent.layer.close(index);
            parent.location.reload();
        });
    </script>
    
    
    <!-- // 表格处理 -->
    
    
</body>
</html>